<%@ page import="com.party.core.model.system.TargetType" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../include/tag.jsp" %>
<%@ taglib prefix="memberForm" uri="http://www.tongxingzhe.cn/memberForm" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>${empty signProject.id ? '发布' : '编辑'}打卡项目</title>
    <%@include file="../include/commonFile.jsp" %>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <link rel="stylesheet" href="${ctx}/static/uploadCI/upload.css">
    <style type="text/css">
        .form-tip {
            float: left;
            margin-right: 10px;
            width: calc(100% - 110px);
        }

        .ci-img-list .item {
            width: auto !important;
            height: auto !important;
            margin-bottom: 10px;
            margin-right: 10px;
            display: inline-block;
        }

        .ci-img-list .item .img-item {
            position: relative;
            width: 155px !important;
            height: 220px !important;
            border: 5px solid #e6e6e6;
            margin-bottom: 0px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            cursor: pointer;
            float: none;
        }

        .ci-img-list .img-item .del-icon {
            right: -17px!important;
            top: -19px!important;
            font-size: 28px;
            color: #e8473f;
            position: absolute;
            -webkit-transition: color .2s ease-in;
            -moz-transition: color .2s ease-in;
            transition: color .2s ease-in;
        }

        .calc-110 {
            float: left;
            margin-right: 10px;
            width: 50%;
        }
    </style>
</head><body>
<!--头部-->
<%@include file="../include/header.jsp" %>
<div class="index-outside">
    <%@include file="../include/sidebar.jsp" %>
    <!--内容-->
    <section>
        <div class="section-main">
            <div class="add-form-content">
                <form id="myForm" class="layui-form mt20" method="post" action="${ctx}/sign/project/save.do">
                    <input type="hidden" lay-verify="groupIsExpire" />
                    <div class="layui-form-item">
                        <label class="layui-form-label">活动标题<span class="f-verify-red">*</span></label>
                        <div class="layui-input-block">
                            <input type="text" name="title" lay-verify="title" placeholder="标题" class="layui-input calc-110"
                                   value="${signProject.title}" maxlength="35">
                            <input type="hidden" name="id" value="${signProject.id}"/>
                            <div class="layui-form-mid layui-word-aux">标题，最多35字符</div>
                            <div class="cl"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">发布者<span class="f-verify-red">*</span></label>
                            <div class="layui-input-inline">
                                <c:if test="${empty signProject.publisher}">
                                    <input type="text" name="publisher" lay-verify="signProject" autocomplete="off" class="layui-input" value="${sessionScope.newCurrentUser.realname}">
                                </c:if>
                                <c:if test="${not empty signProject.publisher}">
                                    <input type="text" name="publisher" lay-verify="signProject" autocomplete="off" class="layui-input" value="${signProject.publisher}">
                                </c:if>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">发布者头像<span class="f-verify-red">*</span></label>
                        <div class="cover-content">
                            <c:if test="${signProject == null || empty signProject.publisherLogo}">
                                <input type="hidden" name="publisherLogo" id="publisherLogo" lay-verify="publisherLogo" value="${sessionScope.newCurrentUser.logo}"/>
                                <span id="logo-img" class="round-img" style="background-image:url(${sessionScope.newCurrentUser.logo})"></span>
                            </c:if>
                            <c:if test="${signProject != null && not empty signProject.publisherLogo}">
                                <input type="hidden" name="publisherLogo" id="publisherLogo" lay-verify="publisherLogo" value="${signProject.publisherLogo}"/>
                                <span id="logo-img" class="round-img" style="background-image:url('${signProject.publisherLogo}')"></span>
                            </c:if>
                            <a class="layui-btn layui-btn-danger" id="sel_logo_img">+添加头像</a>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">项目背景<span class="f-verify-red">*</span></label>
                        <div class="cover-content">
                            <input type="hidden" name="projectLogo" id="projectLogo" lay-verify="projectLogo" value="${signProject.projectLogo}"/>
                            <c:if test="${signProject == null || empty signProject.projectLogo}">
                                <span id="cover-img" class="cover-img" style="background-image:url(${ctx}/image/posterImg.png)"></span>
                            </c:if>
                            <c:if test="${signProject != null && not empty signProject.projectLogo}">
                                <span id="cover-img" class="cover-img" style="background-image:url('${signProject.projectLogo}')"></span>
                            </c:if>
                            <a class="layui-btn layui-btn-danger" id="sel_pic_img">+添加项目背景</a>
                            <div class="form-word-aux">建议尺寸：800x450</div>
                        </div>
                    </div>
                    <input type="hidden" name="signLogo" id="signLogo" value="${signProject.signLogo}"/>
                    <%--<div class="layui-form-item">
                        <label class="layui-form-label">个人主页海报<span class="f-verify-red">*</span></label>
                        <div class="cover-content">
                            <input type="hidden" name="signLogo" id="signLogo" lay-verify="signLogo" value="${signProject.signLogo}"/>
                            <c:if test="${signProject == null || empty signProject.signLogo}">
                                <span id="sign-img" class="cover-img" style="background-image:url(${ctx}/image/posterImg.png)"></span>
                            </c:if>
                            <c:if test="${signProject != null && not empty signProject.signLogo}">
                                <span id="sign-img" class="cover-img" style="background-image:url('${signProject.signLogo}')"></span>
                            </c:if>
                            <a class="layui-btn layui-btn-danger" id="sel_sign_img">+添加主页海报</a>
                            <div class="form-word-aux">建议尺寸：800x450</div>
                        </div>
                    </div>--%>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">开始时间<span class="f-verify-red">*</span></label>
                            <div class="layui-input-inline">
                                <input class="layui-input" name="startStrTime" lay-verify="startDate" placeholder="开始时间" id="startTime"
                                       readonly
                                       value='<fmt:formatDate value="${signProject.startTime}" pattern="yyyy-MM-dd HH:mm" />'/>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">结束时间<span class="f-verify-red">*</span></label>
                            <div class="layui-input-inline">
                                <input class="layui-input" name="endStrTime" lay-verify="endDate" placeholder="结束时间" id="endTime"
                                       readonly
                                       value='<fmt:formatDate value="${signProject.endTime}" pattern="yyyy-MM-dd HH:mm" />'/>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="gradeCheck" value="0" />
                    <%--<div class="layui-form-item">
                        <label class="layui-form-label">需要审核</label>
                        <div class="layui-input-block">
                            <input type="radio" name="applyCheck" lay-filter="applyCheck" id="isApplyCheck" value="1" title="审核"
                            ${signProject.applyCheck ==1 ? 'checked="checked"' : ''}>
                            <input type="radio" name="applyCheck" lay-filter="applyCheck" id="noApplyCheck" value="0" title="不审核"
                            ${signProject.applyCheck == 0 ? 'checked="checked"' : ''}>
                        </div>
                    </div>--%>

                    <input type="hidden" name="rankShow" value="1" />
                    <%--<div class="layui-form-item">
                        <label class="layui-form-label">显示队伍排行</label>
                        <div class="layui-input-block">
                            <input type="radio" name="rankShow" lay-filter="rankShow" id="isRankShow" value="1" title="显示"
                            ${signProject.rankShow ==1 ? 'checked="checked"' : ''}>
                            <input type="radio" name="rankShow" lay-filter="rankShow" id="noRankShow" value="0" title="不显示"
                            ${signProject.rankShow == 0 ? 'checked="checked"' : ''}>
                        </div>
                    </div>--%>

                    <input type="hidden" name="price" value="0"/>
                    <%--<div class="layui-form-item">
                        <label class="layui-form-label">是否收费</label>
                        <div class="layui-input-block">
                            <input type="radio" name="isFree" lay-filter="isFree" id="noFree" value="noFree" title="收费活动"
                            ${signProject == null || signProject.price !=0.0 ? 'checked="checked"' : ''}>
                            <input type="radio" name="isFree" lay-filter="isFree" id="free" value="free" title="免费活动"
                            ${signProject != null && signProject.price == 0.0 ? 'checked="checked"' : ''}>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">活动金额<span class="f-verify-red">*</span></label>
                            <div class="layui-input-inline">
                                <c:if test="${signProject == null || signProject.price != 0.0}">
                                    <input type="text" name="price" lay-verify="price" placeholder="￥" class="layui-input" value="${signProject.price}"/>
                                </c:if>
                                <c:if test="${signProject != null && signProject.price == 0.0}">
                                    <input type="text" name="price" lay-verify="price" placeholder="￥" class="layui-input" disabled="disabled"/>
                                </c:if>
                            </div>
                        </div>
                    </div>--%>
                    <div class="layui-form-item">
                        <label class="layui-form-label">分享背景<span class="f-verify-red">*</span></label>
                        <a href="javascript:openUploadCI()" class="layui-btn layui-btn-danger">+添加图片</a>
                        <div class="form-word-aux">建议尺寸：750x1334</div>
                        <div class="layui-input-block" style="min-height: auto;">
                            <input type="hidden" name="shareBackground" id="picList" lay-verify="shareBackground" value="${signProject.shareBackground}" />
                            <div class="zc-ci-img-list ci-img-list" id="img_list">
                                <c:if test="${not empty signProject.shareBackground}">
                                    <c:forEach var="pic" items="${signProject.shareBackground.split(',')}">
                                        <div class="item" data-url="${pic}">
                                            <div class="img-item" style="background-image: url('${pic}')">
                                                <i class="layui-icon del-icon" onclick="delQImg(this)">&#x1007;</i>
                                            </div>
                                        </div>
                                    </c:forEach>
                                </c:if>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">需要审核<span class="f-verify-red">*</span></label>
                        <div class="layui-input-block">
                            <input type="radio"  ${signProject.id != null ? 'disabled' : ''} name="applyCheck" value="1" title="是"
                            ${signProject == null || signProject.applyCheck == 1 ? 'checked="checked"' : ''}
                            >
                            <input type="radio" ${signProject.id != null ? 'disabled' : ''} name="applyCheck" value="0" title="否"
                            ${signProject != null && signProject.applyCheck == 0 ? 'checked="checked"' : ''}
                            >
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">项目描述</label>
                        <div class="layui-input-block">
                            <input type="text" name="remarks" placeholder="项目描述" maxlength="100" class="layui-input form-tip" value="${signProject.remarks}">
                            <div class="layui-form-mid layui-word-aux">最多100字符</div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">规则<span class="f-verify-red">*</span></label>
                        <div class="layui-input-block">
                            <script id="ueditor1" type="text/plain"></script>
                            <div style="display: none" id="contentView">${signProject.rule}</div>
                            <input type="hidden" name="rule" id="content" lay-verify="rule" data-link-ue="ueditor1"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <a href="javascript:void(0)" class="layui-btn layui-btn-danger" lay-submit lay-filter="*">立即提交</a>
                            <a href="${ctx}/sign/project/list.do" class="layui-btn layui-btn-primary">取消</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!--底部-->
        <%@include file="../include/footer.jsp" %>
        <div style="display: none" id="create_date_str">
            <fmt:formatDate value="${signProject.createDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
        </div>
        <c:set var="expirationTime" value="${memberForm:getExpirationTimeById(sessionScope.newCurrentUser.id)}"/>
        <c:set var="isExpire" value="${memberForm:isExpire(sessionScope.newCurrentUser.id, null)}"/>
    </section>
</div>

<script type="text/javascript" src="${ctxStatic}/UEditor/ueditor.config.js"></script>
<script type="text/javascript" src="${ctxStatic}/UEditor/ueditor.all.js"></script>
<script type="text/javascript" src="${ctxStatic}/UEditor/myplugin/uploadCI.js"></script>
<script type="text/javascript" src="${ctxStatic}/UEditor/myplugin/uploadVideo.js"></script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" src="${ctxStatic}/UEditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="${ctx}/script/common/form_cache.js"></script>
<script>
    var ue = UE.getEditor('ueditor1');

    var form, formcache;
    $(function () {
        layui.use(['form', 'laydate'], function () {
            form = layui.form, laydate = layui.laydate;
            var radioValue = null;

            form.on('radio(isFree)', function (data) {
                radioValue = data.value;
                if (radioValue == "noFree") {
                    $("[name=price]").prop("disabled", false);
                } else {
                    $("[name=price]").val("");
                    $("[name=price]").prop("disabled", true);
                }
            });

            //自定义验证规则
            form.verify({
                groupIsExpire: function() {
                    if ('${isExpire}' == 'true') {
                        txz.openExpireDialog();
                        return false;
                    }
                    return "";
                },
                title: function (value) {
                    if (value == "") {
                        return '请填写项目标题';
                    }
                },
                publisher: function (value) {
                    if (value == "") {
                        return '请填写发布者';
                    }
                },
                publisherLogo: function (value) {
                    if (value == "") {
                        return '请填写发布者头像';
                    }
                },
                projectLogo: function (value) {
                    if (value == "") {
                        return '请上传项目背景';
                    }
                },
                /*signLogo: function (value) {
                    if (value == "") {
                        return '请填写个人主页海报';
                    }
                },*/
                startDate: function (value) {
                    if (value == "") {
                        return "请设置开始时间";
                    }
                },
                endDate: function (value) {
                    if (value == "") {
                        return "请设置截止时间";
                    }
                    var startDate = $("[name=startStrTime]").val();
                    var endDate = $("[name=endStrTime]").val();
                    if (endDate <= startDate) {
                        return "截止时间应该小于开始时间";
                    }
                    var max = '${memberForm:dateFormat(expirationTime, 'yyyy-MM-dd HH:mm:ss')}';
                    if (value >= max) {
                        return "截止时间不能超过账户过期时间";
                    }
                },
                shareBackground : function (value) {
                    if (value == "") {
                        return "请上传分享背景图片";
                    } else {
                        if (value.split(",").length > 5) {
                            return "最多只能上传5张背景图片";
                        }
                    }
                },
                /*price: function (value) {
                    var reg = /^(([0-9]|([1-9][0-9]{0,9}))((\.[0-9]{1,2})?))$/;
                    if (radioValue == null) {
                        var type = $("[name=isFree]:checked").val();
                        if (type == "noFree") {
                            if (value == "") {
                                return "请设置活动报名金额";
                            } else if (!reg.test(value)) {
                                return "请输入正确的金额";
                            }
                        }
                    } else {
                        if (radioValue == "noFree") {
                            if (value == "") {
                                return "请设置活动报名金额";
                            } else if (!reg.test(value)) {
                                return "请输入正确的金额";
                            }
                        }
                    }
                },*/
                rule: function (value) {
                    $("#contentView").html(ue.getContent());
                    var content = $("#contentView").html();
                    if (content == "") {
                        return "请填写项目规则";
                    }
                }
            });

            //监听提交
            form.on('submit', function (data) {
                txz.submitObject(data.elem, function (callBack) {
                    var action = $("#myForm").attr("action");
                    var formData = getFormData();
                    txz.ajaxRequest({
                        method: 'post',
                        url: action,
                        saveCache: true,
                        cacheObj: formcache,
                        params: formData,
                        callBack: function (res) {
                            typeof callBack === 'function' && callBack();
                            if (res.success) {
                                util.layerMsgSuccess("提交成功", function () {
                                    location.href = "${ctx}/sign/project/list.do";
                                });
                            } else {
                                util.layerMsgError("提交失败")
                            }
                        }
                    });
                });
            });
            form.render('radio');


            var min;
            if (${empty signProject.id}) {
                min = new Date().Format('yyyy-MM-dd HH:mm:ss');
            } else {
                min = $("#create_date_str").text();
            }

            var max = '${memberForm:dateFormat(expirationTime, 'yyyy-MM-dd HH:mm:ss')}';

            //日期
            var start = {
                elem: '#startTime',
                min: min,
                max: max || '2099-06-16 23:59',
                type: 'datetime',
                format: 'yyyy-MM-dd HH:mm'
            };

            var end = {
                elem: '#endTime',
                min: min,
                max: max || '2099-06-16 23:59',
                type: 'datetime',
                format: 'yyyy-MM-dd HH:mm' //日期格式
            };
            laydate.render(start);
            laydate.render(end);
        });

        ue.addListener('ready', function () {
            this.setHeight(850);
            this.setContent($("#contentView").html());
            //加载缓存
            if (!'${signProject.id}') {
                formcache = new fCache({
                    fCacheKey: 'form_cache_signpro',//暂存的key
                    cacheCallback: loadCacheData,//获取到缓存后加载的方法
                    getFormData: getFormData
                }).init();
            }
        });
        ue.addListener('blur', function () {
            $("#contentView").html(ue.getContent());
        });
        txz.saveStatus = false;

        $('#sel_pic_img').click(function () {
            txz.openSelImg({
                min: 1,
                max: 1,
                info: '建议尺寸：800x450',
                type: '<%=TargetType.SIGN.getCode()%>',
                cb: function (imgs) {
                    $('#cover-img').css('background-image', 'url(' + imgs[0].path + ')');
                    $('#projectLogo').val(imgs[0].path);
                    $('#signLogo').val(imgs[0].path);
                }
            })
        })
        $('#sel_logo_img').click(function () {
            txz.openSelImg({
                min: 1,
                max: 1,
                info: '建议尺寸：120x120',
                type: '<%=TargetType.SIGN.getCode()%>',
                cb: function (imgs) {
                    $('#logo-img').css('background-image', 'url(' + imgs[0].path + ')');
                    $('#publisherLogo').val(imgs[0].path);
                }
            })
        })
        $('#sel_sign_img').click(function () {
            txz.openSelImg({
                min: 1,
                max: 1,
                info: '建议尺寸：800x450',
                type: '<%=TargetType.SIGN.getCode()%>',
                cb: function (imgs) {
                    $('#sign-img').css('background-image', 'url(' + imgs[0].path + ')');
                    $('#signLogo').val(imgs[0].path);
                }
            })
        })
    })

    // 文本编辑器图片上传
    function uEditorUploadCI(editor) {
        txz.openSelImg({
            min: 1,
            type: '<%=TargetType.SIGN.getCode()%>',
            cb: function (imgs) {
                if (imgs.length) {
                    for (var i = 0, item; i < imgs.length; i++) {
                        item = imgs[i];
                        editor.focus();
                        editor.execCommand('inserthtml', item.htmlStr);
                    }
                }
            }
        })
    }

    function uEditorUploadCIVideo(editor) {
        txz.openSelVideo({
            min: 1,
            type: '<%=TargetType.SIGN.getCode()%>',
            cb: function (imgs) {
                if (imgs.length) {
                    for (var i = 0, item; i < imgs.length; i++) {
                        item = imgs[i];
                        editor.focus();
                        editor.execCommand('inserthtml', item.htmlStr);
                    }
                }
            }
        })
    }

    function openUploadCI() {
        var picLength = $(".ci-img-list .item").length;
        var maxlength = 5 - picLength <= 0 ? 0 : 5 - picLength;
        txz.openSelImg({
            min: 1,
            max: maxlength,
            type: '<%=TargetType.SIGN.getCode()%>',
            cb: function (imgs) {
                if (imgs.length) {
                    var array = new Array();
                    for (var i = 0, item; i < imgs.length; i++) {
                        item = imgs[i];
                        $("#img_list").append('<div class="item" data-url="' + item.path + '">' +
                            '<div class="img-item" style="background-image: url(' + item.path + ')">' +
                            '<i class="layui-icon del-icon" onclick="delQImg(this)">&#x1007;</i>' +
                            '</div>' +
                            '</div>');
                        array.push(item.path);
                    }
                    $("#picList").val(array.join(","));
                }
            }
        })
    }
    function delQImg(obj) {
        $(obj).closest(".item").remove();
    }
    function getFormData() {
        $("#content").val(ue.getContent().replace(/&quot;/gi, ""));
        var array = new Array();
        $("#img_list .item").each(function (index, element) {
            array.push($(element).attr("data-url"));
        });
        $("#picList").val(array.join(","));
        return util.serializeForm($('#myForm').serializeArray());
    }
    //此方法用于加载缓存数据
    function loadCacheData(cacheData) {
        if (cacheData['publisherLogo']) {
            $('#logo-img').css('background-image', 'url(' + cacheData['publisherLogo'] + ')');
        }
        if (cacheData['projectLogo']) {
            $('#cover-img').css('background-image', 'url(' + cacheData['projectLogo'] + ')');
        }
        if (cacheData['signLogo']) {
            $('#sign-img').css('background-image', 'url(' + cacheData['signLogo'] + ')');
        }
        //是否收费
        if (cacheData['isFree']) {
            radioValue = cacheData['isFree'];
            if (radioValue == "noFree") {
                $("[name=price]").prop("disabled", false);
            } else {
                $("[name=price]").val("");
                $("[name=price]").prop("disabled", true);
            }
        }
        //跑马灯
        if (cacheData['shareBackground']) {
            var picList = cacheData['shareBackground'];
            if (picList && picList.length > 0) {
                $("#img_list").html('');

                for(var i = 0; i < picList.split(",").length; i++) {
                    var pic = picList.split(",")[i];
                    $("#img_list").append('<div class="item" data-url="' + pic + '">' +
                        '<div class="img-item" style="background-image: url(' + pic + ')">' +
                        '<i class="layui-icon del-icon" onclick="delQImg(this)">&#x1007;</i>' +
                        '</div>' +
                        '</div>');
                }
            }
        }
        form.render();
    }
</script>
<script type="text/javascript">
    txz.initHeader({
        nav:[{
            name: '我发布的打卡项目',
            href: '${ctx}/sign/project/list.do'
        },{
            name: '编辑打卡项目',
            curr: true
        }],
        btns:[{
            name: '返回',
            icon: 'back',
            href: '${ctx}/sign/project/list.do'
        }]
    });
</script>
</body>
</html>